<template>
    <div class="workorder">
        <div class="page-head">
            <span class="head-text">装配报工</span>
            <span class="head-text">当前用户：{{ nickname }}</span>
        </div>
        <div class="page-info">
            <el-checkbox v-model="isPlanShutdown">计划停机请勾选</el-checkbox>
        </div>
        <div class="page-main">
            <div class="main-left">
                <el-form :model="formData" ref="leftForm" :rules="formDataRules" label-width="110px" label-position="left" size="mini" :hide-required-asterisk="false" class="demo-ruleForm">
                    <el-form-item label="报工方式" prop="reportWay">
                        <el-radio-group v-model="formData.reportWay">
                            <el-radio :label="0">装配报工</el-radio>
                            <el-radio :label="1">EPC报工</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="线体" prop="lineName">
                        <el-select v-model="formData.lineName" @change="lineNameChangeEvent" placeholder="下拉选择线体" size="small">
                            <el-option v-for="(item,index) in formData.lineNameList" :label="item" :value="item" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="品号" prop="materialCode">
                        <el-select v-model="formData.materialCode" placeholder="下拉选择产品" size="small" :disabled="isPlanShutdown">
                            <el-option v-for="(item,index) in formData.materialList" :label="item.materialCode" :value="item.materialCode" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单" prop="productOrder">
                        <el-select v-model="formData.productOrder" placeholder="下拉选择订单" size="small" :disabled="isPlanShutdown">
                            <el-option v-for="item,index in formData.productOrderList" :label="item.productOrderMaterial.productOrderNumber" :value="item.productOrderMaterial.productOrderNumber" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="班次" prop="classes">
                        <el-select v-model="formData.classes" placeholder="下拉选择班次" size="small" disabled>
                            <el-option v-for="item,index in formData.classesList" :label="item.shiftType" :value="item.shiftType" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备运行时长" prop="equipmentRunningHours" size="small">
                        <el-input v-model="formData.equipmentRunningHours" @input="validateInputEquipmentRunningHours" placeholder="请输入设备运行时长(H)" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="出勤工时" prop="attendanceHours" size="small">
                        <el-input v-model="formData.attendanceHours" @input="validateInput('attendanceHours')" placeholder="请输入出勤工时" :disabled="isPlanShutdown"></el-input>
                    </el-form-item>
                    <el-form-item label="计划数量" size="small">
                        <el-input v-model="formData.planNumber" placeholder="自动读取" disabled></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="main-right">
                <el-form :model="formData" ref="rightForm" :rules="formDataRules" label-width="110px" label-position="left" size="mini" :hide-required-asterisk="false" class="demo-ruleForm">
                    <el-form-item label="完成数量" prop="finishedNum">
                        <el-input v-model.number="formData.finishedNum" @input="dealQuantityEvent('finishedNum')" size="small" placeholder="请输入完成数量" :disabled="isPlanShutdown"></el-input>
                    </el-form-item>
                    <el-form-item label="不合格数" prop="unQualifiedNum" size="small">
                        <el-input :value="formData.unQualifiedNum" size="small" placeholder="自动计算" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="合格数量" size="small">
                        <el-input :value="formData.qualifiedNum"  placeholder="自动计算" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="工废数量" prop="scrapField1" size="small">
                        <el-input v-model.number="formData.scrapField1" @input="dealQuantityEvent('scrapField1')" size="small" placeholder="请输入工废数量" :disabled="isPlanShutdown"></el-input>
                    </el-form-item>
                    <el-form-item label="料废数量" prop="scrapField2" size="small">
                        <el-input v-model.number="formData.scrapField2" @input="dealQuantityEvent('scrapField2')" size="small" placeholder="请输入料废数量" :disabled="isPlanShutdown"></el-input>
                    </el-form-item>
                    <el-form-item v-if="formData.scrapField2 > 0" label="供应商" prop="supplierCode">
                        <el-select v-model="formData.supplierCode" filterable remote :remote-method="(query) => supplierRemoteMethod('search',query)" :loading="supplierRemoteLoading" @change="supplierChangeEvent" placeholder="下拉选择供应商" size="small">
                            <el-option v-for="item,index in supplierList" :label="item.name" :value="item.code" :key="index">
                                <span style="float: left">{{ item.code }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="刀废数量" prop="scrapQuantity" size="small">
                        <el-input v-model.number="formData.scrapQuantity" @input="dealQuantityEvent('scrapQuantity')" size="small" placeholder="请输入刀废数量" :disabled="isPlanShutdown"></el-input>
                    </el-form-item>
                    <el-form-item label="停机信息">
                        <el-button plain type="primary" @click="wirteDowntReason" :disabled="isPlanShutdown">{{ downtReasonBtnInfo }}</el-button>
                        <downt-reason ref="downtReason" :reasonDataList="formData.downtReasonList" @close="downtReasonClose"></downt-reason>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="page-records">
            <template v-if="formData.reportWay === 0 && !isPlanShutdown">
                <div class="records-head">
                    <div class="head-title">报废记录</div>
                    <div class="head-main">
                        <div class="main-item">
                            <span class="item-tip">日期:</span>
                            <el-date-picker v-model="records.date" type="date" :editable="false" value-format="yyyy-MM-dd" size="mini" placeholder="请选择时间" class="el-date-picker"></el-date-picker>
                        </div>
                        <div class="main-item">
                            <span class="item-tip">作业员:</span>
                            <span class="item-tip item-content">{{ nickname }}</span>
                        </div>
                    </div>
                </div>
                <div class="records-process" ref="records">
                    <div class="process-content">
                        <div class="process-table" ref="recordsTable">
                            <el-table :data="records.recordTable" border style="width:100%" size="small" max-height="200">
                                <el-table-column prop="processName" label="工序" width=""></el-table-column>
                                <el-table-column prop="defectQuantity" label="不良数量" width="">
                                    <template slot-scope="{ row, $index }">
                                        <!-- <el-input v-model.number="row.defectQuantity" size="small" @input="row.defectQuantity = String(row.defectQuantity).replace(/[^\d]/g, '')" style="width:60%;" placeholder="请输入不良数量"></el-input> -->
                                        <el-input v-model.number="row.defectQuantity" size="small" @input="processInputEvent($event,row,$index)" style="width:60%;" placeholder="请输入不良数量"></el-input>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="bom-table">
                            <el-table :data="records.processMaterialTable" border style="width:100%" size="small" max-height="200">
                                <el-table-column prop="materialName" label="工序用料" width=""></el-table-column>
                                <el-table-column prop="usedQuantity" label="用料数量" width="">
                                    <template slot-scope="{ row, $index }">
                                        <el-input :value="row.usedQuantity" size="small" style="width:90%;" disabled placeholder="请输入用料数量"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="defectQuantity" label="不良数量" width="">
                                    <template slot-scope="{ row, $index }">
                                        <el-input v-model.number="row.defectQuantity" size="small" @input="bomInputEvent($event,row,$index)" style="width:90%;" placeholder="请输入不良数量"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="statisticalQuantity" label="数据统计" width="">
                                    <template slot-scope="{ row, $index }">
                                        <el-input :value="row.statisticalQuantity" size="small" style="width:90%;" disabled placeholder="请输入"></el-input>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <div class="page-footer">
            <el-button type="primary" size="small" class="footer-btn" @click="cancel_btn">取消</el-button>
            <el-button type="primary" size="small" class="footer-btn" :loading="confirmButtonLoading" @click="save_btn">{{ workreportButtonText }}</el-button>
        </div>
    </div>
</template>
  
<script>
import { reqUserInfo, reqProductOrderList, reqSaveData, reqLineList, reqProcessMaterialList, reqProcessMaterialListByProcedureId, reqProcessListByMaterialCode, reqClassTeamList, reqOrderResidueCount,reqClassesList, reqUserClassInfo,reqSupplierList } from "@/api/workOrder.js";
import { reqCheckIsTeam } from "@/api/workOrder.js";
import { portrait, autoOrientation, fullscreen } from "@/utils/rotatingScreen.js";
import DowntReason from "@/components/downtReason/index.vue";
import { reqDefaultSalary,reqOeeInfoByProductModel } from "@/api/meterTable.js";
import { getUserInfoByToken } from "@/utils/toosls.js";
import { closeBarheight,appBarheight, appTabBarControl } from "@/utils/jingzhi.js";
import { Dialog } from "vant";
import { reqAllLineList,reqLineMaterialList } from "@/api/workOrder.js";
export default {
    name:"workorder1",
    components:{
        DowntReason
    },
    data() {
        const validateFinishedNum = (rule, value, callback) => {
            const isPlanShutdown = this.isPlanShutdown;
            let unQualifiedNum = this.formData.unQualifiedNum;
            const planNumber = this.formData.planNumber;
            if(!isPlanShutdown){
                if (value === '') {
                    callback(new Error('请输入完成数量'));
                } else if (parseInt(value < 0)) {
                    callback(new Error('输入的数量非法'));
                } else if (parseInt(value) > parseInt(planNumber)){
                    callback(new Error('输入的数量不能大于计划数量'));
                } else if (unQualifiedNum !== '' && parseInt(value) < parseInt(unQualifiedNum)){
                    callback(new Error('完成数量不能小于不合格数量'));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };
        const validateUnQualifiedNum = (rule, value, callback) => {
            const isPlanShutdown = this.isPlanShutdown;
            let finishedNum =  this.formData.finishedNum;
            if(!isPlanShutdown){
                if (value === '') {
                    callback(new Error('不合格数量不能为空'));
                } else if (parseInt(value < 0)) {
                    callback(new Error('不合格数量非法'));
                } else if(finishedNum !== '' && parseInt(value) > parseInt(finishedNum)){
                    callback(new Error('不合格数量不能大于完成数量'));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };
        const validateReportWay = (rule,value,callback) => {
            const isPlanShutdown = this.isPlanShutdown;
            if (value === '') {
                callback(new Error('请选择报工方式'));
            } else {
                callback();
            }
        }
        const validateMaterialCode = (rule,value,callback) => {
            const isPlanShutdown = this.isPlanShutdown;
            if(!isPlanShutdown){
                if (value === '') {
                    callback(new Error('请选择产品'));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        }
        const validateProductOrder = (rule,value,callback) => {
            const isPlanShutdown = this.isPlanShutdown;
            if(!isPlanShutdown){
                if (value === '') {
                    callback(new Error('请选择订单号'));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        }
        const validateAttendanceHours = (rule,value,callback) => {
            const isPlanShutdown = this.isPlanShutdown;
            if(!isPlanShutdown){
                if (value === '') {
                    callback(new Error('请输入出勤工时'));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        }
        const equipmentRunningHours = (rule,value,callback) => {
            const isPlanShutdown = this.isPlanShutdown;
            if(!isPlanShutdown){
                callback();
            } else {
                callback();
            }
        }
        const validatorSupplier = (rule,value,callback) => {
            const { scrapField2 } = this.formData;
            if(scrapField2 && String(value).length === 0){
                callback(new Error('请选择供应商'));
            } else {
                callback();
            }
        }
        return {
            nickname:"",  //登录用户
            userId:"",  //用户id
            userPhone:"",
            username:"",
            classTeamList:[],
            lineList:[
                {lineName:"装配1线",materialCode:"61420045",materialName:"ELT09"},
                {lineName:"装配二线",materialCode:"61420049",materialName:"ELT13"},
                {lineName:"装配二线",materialCode:"61420106",materialName:"ELT23"},
                {lineName:"装配二线",materialCode:"61420234",materialName:"ELT35"},
                {lineName:"装配2线",materialCode:"614020-7",materialName:"ELT09安装盘"},
                {lineName:"装配2线",materialCode:"614104",materialName:"ELT09后盖"},
                {lineName:"装配3线",materialCode:"61420234",materialName:"ELT35"},
                {lineName:"装配3线",materialCode:"61420100",materialName:"ELT24"},
                {lineName:"装配4线",materialCode:"61420175",materialName:"BYD175"},
                {lineName:"装配4线",materialCode:"61420235",materialName:"丰沃925"},
                // {lineName:"装配4线",materialCode:"61420236",materialName:"丰沃508-9"},
                {lineName:"装配4线",materialCode:"9008013010",materialName:"508-9喷嘴环"},
                {lineName:"装配5线",materialCode:"61420230",materialName:"PSA2.2"},
                {lineName:"装配6线",materialCode:"61420216",materialName:"天力216"},
                {lineName:"装配6线",materialCode:"61420214",materialName:"天力TDE"},
                {lineName:"装配7线",materialCode:"61420181",materialName:"PSA1.2"}
                // {lineName:"盖瑞特一线",materialCode:"61420230",materialName:"PSA2.2"},
                // {lineName:"盖瑞特二线",materialCode:"61420181",materialName:"PSA1.2"}
            ],
            formData:{
                reportWay:"",  //0-装配报工 1-EPC报工
                lineName:"",
                lineNameList:[],
                materialName:"",  //品名/物料名称
                materialCode:"",
                materialList:[],  //品名下拉数组
                productOrder:"",  //订单号
                productOrderList:[],  //订单列表
                downtReasonList:[],
                finishedNum:'',  //完成数量
                unQualifiedNum:'',  //不合格数量
                planNumber:"",  //计划数量
                qualifiedNum:"",  //合格数量
                attendanceHours:11,  //出勤工时默认11小时
                incomingType:"",
                incomingTypeList:[],
                classes:"",
                classesList:[],
                equipmentRunningHours:"",
                singleShiftWage:"",
                standardManpower:"",
                pieceRate:"",
                scrapField1:'',
                scrapField2:'',
                scrapField1Reason:'',
                scrapField2Reason:'',
                supplierName:'',
                supplierCode:'',
                scrapQuantity:''
            },
            formDataRules: {
                reportWay:[{required:true, validator:validateReportWay, trigger: 'blur'}],
                materialCode:[{required:true, validator:validateMaterialCode, trigger: 'blur'}],
                productOrder:[{required:true, validator:validateProductOrder, trigger: 'blur'}],
                classes:[{required:true, message:"请选择班次", trigger: 'blur'}],
                lineName:[{required:true, message:"请选择线体", trigger: 'blur'}],
                finishedNum: [{required:true, validator: validateFinishedNum, trigger: 'blur' }],
                unQualifiedNum:[{required:false , validator: validateUnQualifiedNum, trigger: 'blur' }],
                attendanceHours: [{required: true, validator:validateAttendanceHours, trigger: 'blur'}],
                equipmentRunningHours: [{required:false, validator:equipmentRunningHours, trigger: 'blur'}],
                scrapField1: [{required:true, message:'请填写工废数量', trigger: 'blur'}],
                scrapField2: [{required:true, message:'请填写料废数量', trigger: 'blur'}],
                supplierCode: [{required:true, validator:validatorSupplier, trigger: 'blur'}],
                scrapQuantity: [{required:true, message:'请填写刀废数量', trigger: 'blur'}],
            },
            //物料报废记录
            records:{
                date: this.formatDate(new Date(),1),
                recordTable:[],
                processMaterialTable:[]  //工序用料表
            },
            isPlanShutdown:false,
            confirmButtonLoading:false,
            remainingQuantity:0,
            workreportButtonText:'报工',
            teamInfo:{
                teamName:"",
                teamRoleNum:null
            },
            //机加工 工废 料废
            jjg_waste_gf:['换型','换刀','崩刀','断刀','过切','装夹不良','落地件','工废','大小边','其它'],
            jjg_waste_lf:[],
            //走心机 工废 料废
            zxj_waste_gf:['换刀','换型','冷热机','尺寸','铁屑划伤','崩刀','来料不良','工程打样','其它'],
            zxj_waste_lf:['来料表面伤','材料开裂','棒料弯曲','棒料大小不合格','其它'],
            //装配车间 工废 料废
            zp_waste_gf:['打码','压装','焊接','铆接','调机','返修','外协','其它'],
            zp_waste_lf:['大小边','砂眼','外协','未光到','裂纹','卡滞','尺寸','其它'],
            supplierRemoteLoading:false,
            supplierList:[]
        };
    },
    mounted(){
        this.getLineList();
        //精致平台获取用户信息可能不准,此函数需要延迟调用
        setTimeout(()=> {
            this.getUserInfo();
            //this.getClassTeamList();
            this.getClassList();
            this.getUserClassInfo();
        },500)
        //console.log('YT2529490256704');测试数据
        this.getDefaultSalary();
        this.checkTeamInfo();
        const isDevelopment = process.env.NODE_ENV === 'development';
        if(!isDevelopment){
            autoOrientation();
        }
        this.supplierRemoteMethod();
    },
    computed:{
        downtReasonBtnInfo(){
            const downtReasonList = this.formData.downtReasonList;
            let tip = "点击填写";
            if(downtReasonList.length > 0){
                for(let i = 0; i < downtReasonList.length; i ++){
                    if(Number(downtReasonList[i].downtimeDuration) > 0){
                        tip = "点击修改";
                        return tip;
                    }
                }
                return tip;
            } else {
                return tip;
            }
        },
        wasteList_gf(){
            return this.zp_waste_gf;
        },
        wasteList_lf(){
            return this.zp_waste_lf;
        }
    },
    watch:{
        //监听物料选择的变化
        "formData.materialCode":{
            handler(newVal, oldVal){
                if(newVal !== oldVal && newVal !== ""){
                    //处理物料名称
                    let materialInfo = this.formData.materialList.find(item => item.materialCode === newVal);
                    if(materialInfo){
                        this.formData.materialName = materialInfo.materialName;
                    }
                    //获取对应物料的订单
                    this.formData.productOrderList = [];
                    this.formData.productOrder = "";
                    this.getProductOrderList();
                    if(this.formData.reportWay === 0){
                        //获取工序
                        this.records.recordTable = [];
                        this.getProcessListByMaterialCode();
                        //获取工序用料
                        this.records.processMaterialTable = [];
                        this.getAllProcessMaterialListInfo();
                    }
                    this.getOeeInfoByProductModel();
                }
                if(newVal === ""){
                    this.formData.productOrderList = [];
                    this.records.processMaterialTable = [];
                    this.records.recordTable = [];
                    this.formData.productOrder = "";
                    this.formData.planNumber = "";
                }
            }
        },
        //监听订单的选择
        "formData.productOrder":{
            handler(newVal, oldVal){
                if(newVal !== oldVal && newVal !== ""){
                    //获取订单中的计划数量
                    let orderInfo = this.formData.productOrderList.filter(item => item.productOrderNumber === this.formData.productOrder)[0];
                    this.formData.planNumber = orderInfo.productOrderMaterial.planQuantity;
                }
                if(newVal === ""){
                    this.formData.planNumber = "";
                }
            }
        },
        //监听线体的选择
        "formData.lineName":{
            handler(newVal, oldVal){
                if(newVal !== oldVal){
                    this.formData.materialCode = "";
                }
            }
        },
        "formData.reportWay":{
            handler(newVal,oldVal){
                this.formData.lineName = "";
                if(newVal !== ""){
                    this.getDefaultSalary();
                }
            }
        },
        isPlanShutdown:{
            handler(newValue,oldValue){ 
                this.planShutdownEvent();
            }
        }
    },
    methods: {
        //获取当前用户信息
        async getUserInfo () {
            reqUserInfo().then(res => {
                if(res.data.code === 200){
                    this.nickname = res.data.data.nickname;
                    this.userId = res.data.data.id;
                    this.userPhone = res.data.data.mobile;
                    this.username = res.data.data.username;
                }
                console.log("获取当前用户信息",res);
            }).catch(err => {
                console.log('请求当前用户信息失败,即将解析本地token...');
                this.getUserInfoByToken();
            })
        },
        getUserInfoByToken(){
            const userInfo = getUserInfoByToken();
            const { name,preferred_username,email} = userInfo;
            this.nickname = name || "";
            this.userId = "";
            this.userPhone = email.split("@")[0];
            this.username = preferred_username || "";
            console.log('本地解析token获取用户信息===> nickname:' + this.nickname + " userId:" + this.userId + " userPhone:" + this.userPhone + " username:" + this.username);
            if(this.nickname === "" && this.username === ""){
                Dialog.confirm({title:'提示',message:'未获取到用户信息，请重试'}).then(confirm => {
                    this.getUserInfo();
                })
            }
            return userInfo;
        },
        //查询线体信息
        async getLineList () {
            reqAllLineList().then(res => {
                if(res.data.code === 200){
                    let list = res.data.data;
                    this.formData.lineNameList = list;
                }
                console.log('获取线体信息',res);
            }).catch(err => {
                console.log('获取纤体列表信息失败',err);
                console.log('获取线体列表失败，即将设置默认值...');
                const lineNameList = ['装配1线','装配二线','装配2线','装配3线','装配4线','装配5线','装配6线','装配7线'];
                this.formData.lineNameList = lineNameList;
            })
        },
        lineNameChangeEvent(line){
            reqLineMaterialList(line).then(response => {
                const list = response.data.data;
                this.formData.materialList = list;
            }).catch(err => {
                console.log('获取线体下的物料列表失败',err);
                Dialog.confirm({title:'提示',message:'获取当前产线下关联的物料信息失败，请重试'});
            })
        },
        //选择号物料后查询订单信息
        async getProductOrderList () {
            let materialCode = this.formData.materialCode;
            if(materialCode === "") return ;
            reqProductOrderList(materialCode).then(res => {
                if(res.data.code === 200){
                    this.formData.productOrderList = res.data.data.content;
                }
                console.log("通过物料编码/品名查询订单信息",res);
            }).catch(err => {
                console.log("通过物料编码/品名查询订单信息",err);
                Dialog.confirm({title:'提示',message:'通过物料编码查询订单信息失败，点击确定按钮重试'}).then(confirm => {
                    this.getProductOrderList();
                })
            })
        },
        //选择物料后查询工序信息
        async getProcessListByMaterialCode(){
            let materialCode = this.formData.materialCode;
            reqProcessListByMaterialCode(materialCode).then(res => {
                if(res.data.code === 200 && res.data.data.length > 0){
                    //去掉目视工序
                    let list = res.data.data.filter(item => {
                        if(item.procedureName.includes("目视")){
                            return false;
                        }
                        return true;
                    })
                    this.records.recordTable = this.sortProcedures(list).map(item => {
                        return {procedureId:item.procedureId,processName:item.procedureName,supProcedureId:item.supProcedureId,nextProcedureId:item.nextProcedureId,defectQuantity:0,materialCodeList:[]};
                    });
                    //获取每个工序对应的用料信息
                    this.getProcessMaterialListByProcedureId();
                }
                console.log('根据物料号查询工序信息',res);
            }).catch(err => {
                this.$message({type:"error",message:"工序查询出错"});
            })
        },
        //根据工序id获取所有工序其对应工序用料
        getProcessMaterialListByProcedureId () {
            let list = this.records.recordTable;
            let materialCode = this.formData.materialCode;
            let temp = [];
            for (let i = 0; i < list.length; i++) {
                let procedureId = list[i].procedureId;
                temp.push(reqProcessMaterialListByProcedureId({procedureId,materialCode}));
            }
            Promise.all(temp).then(response => {
                for(let j = 0; j < response.length; j ++){
                    let materialCodeList = [];
                    if(response[j].data.data.length > 0){
                        for(let k = 0; k < response[j].data.data.length; k ++){
                            materialCodeList.push(response[j].data.data[k].materialCode);
                        }
                        this.records.recordTable.forEach(item => {
                            if(item.procedureId == response[j].data.data[0].procedureId){
                                item.materialCodeList = materialCodeList;
                            }
                        })
                    }
                }
                console.log('获取所有的产线工序对应的工序用料',response);
            }).catch(error => {
                console.log('获取工序用料出错,error:',error);
                Dialog.confirm({title:'提示',message:'请求工序用料出错，点击确定按钮重试'}).then(confirm => {
                    this.getProcessMaterialListByProcedureId();
                })
            })
        },
        //工序不良数量输入事件
        processInputEvent(event,row,index){
            this.records.recordTable[index].defectQuantity = String(row.defectQuantity).replace(/[^\d]/g, '');
            //console.log(event,row,index);
            //修改引起工序用料的不良数量变化
            let materialCodeList = row.materialCodeList;
            let list = this.records.processMaterialTable;
            let array = this.records.recordTable;
            let temp = list.filter(item => {
                if(materialCodeList.includes(item.materialCode)){
                    return true;
                }
                return false;
            })
            //给其关联的设置值
            for(let j = 0; j < temp.length; j ++){
                //找出关联的工序用料对应的工序集合
                let sum = 0;
                for(let k = 0; k < array.length; k ++){
                    if(array[k].materialCodeList.includes(temp[j].materialCode)){
                        sum = (sum + Number(array[k].defectQuantity) * parseInt(temp[j].number));
                    }
                }
                temp[j].usedQuantity = sum;
                temp[j].statisticalQuantity = Number(temp[j].usedQuantity) + Number(temp[j].defectQuantity);
            }  
        },
        bomInputEvent(event,row,index) {
            this.records.processMaterialTable[index].defectQuantity = String(row.defectQuantity).replace(/[^\d]/g, '');
            //赋值
            row.statisticalQuantity = Number(row.usedQuantity) + Number(row.defectQuantity);
        },
        //保存、取消按钮
        async save_btn(){
            /* if(this.classTeamList.length === 0){
                this.$message({type:"info",message:"未获取到班组信息不能进行报工"});
                return;
            } */
            //非班组成员不能报工
            if(this.teamInfo.teamRoleNum == -1){
                Dialog({title:'提示',message:'您未在班组成员中，请联系管理员添加您至班组成员后再进行报工'});
                return;
            }
            //管理员不能报工
            if(this.teamInfo.teamRoleNum == 2){
                Dialog({title:'提示',message:'管理员用户不能报工'});
                return;
            }
            if(!(this.teamInfo.teamRoleNum == 0 || this.teamInfo.teamRoleNum == 1)){
                Dialog({title:'提示',message:'当前用户班组类别不属于班组长或者班组成员，不能进行报工'});
                return;
            }
            //停机时长不能大于设备运行时长
            if(this.formData.downtReasonList.reduce((pre,cur) => pre + Number(cur.downtimeDuration),0) > Number(this.formData.equipmentRunningHours)){
                this.$alert("设备停机时长不能大于运行时长",'提示',{confirmButtonText:"确定",callback:action => {}});
                return ;
            }
            //校验左右表单数据
            let validateResult1 = false;
            let validateResult2 = false;
            this.$refs.leftForm.validate((valid,list) => {
                if (valid) {
                    validateResult1 = true;
                } else {
                    validateResult1 = false;
                    if(list.classes){
                        this.$confirm("当前用户所在班组未查询到排班信息，请联系管理人员在排班小程序上进行排班后再报工", '提示', { type: 'warning'});
                    }
                    return false;
                }
            });
            this.$refs.rightForm.validate((valid) => {
                if (valid) {
                    validateResult2 = true;
                } else {
                    validateResult2 = false;
                    return false;
                }
            });
            if(!(validateResult1 && validateResult2)){
                this.$message({type:"info",message:"请将表单填写完整"});
                return;
            }
            
            this.confirmButtonLoading = true;
            if(!this.isPlanShutdown){
                try {
                    await this.getOeeInfoByProductModel();
                    const { equipmentRunningHours,standardManpower,pieceRate } = this.formData;
                    if(equipmentRunningHours == 0 && standardManpower == 0 && pieceRate == 0){
                        this.confirmButtonLoading = false;
                        const model = this.formData.materialCode;
                        this.$alert(`该产品型号${model}没有添加节拍信息，请联系管理人员添加节拍信息后再报工`,'提示',{confirmButtonText:"确定",callback:action => {}});
                        return;
                    }
                } catch (error) {
                    this.confirmButtonLoading = false;
                    return;
                };
            }
            //准备参数
            const { reportWay, lineName, materialName, materialCode, productOrder,downtReasonList, finishedNum, unQualifiedNum, planNumber, attendanceHours, classes, equipmentRunningHours,singleShiftWage,standardManpower,pieceRate } = this.formData; 
            if(!this.isPlanShutdown){
                let restNum = 0;
                try {
                    restNum = await this.getOrderResidueCount();
                } catch (error) {
                    this.confirmButtonLoading = false;
                    return;
                }
                if(Number(finishedNum) > Number(restNum)){
                    this.$confirm(`完成数量(${finishedNum})大于当前订单剩余的计划数量(${restNum})，是否进行多张工单报工(当前工单完成数量将置为剩余计划数量,多余完成数量将转移至下一工单)?`, '提示', { confirmButtonText: '进行多张工单报工',cancelButtonText: '取消报工',type: 'warning'}).then(async () => {
                        await this.saveWorkOrder(restNum);
                        //继续报下一张工单
                        this.remainingQuantity = Number(finishedNum) - Number(restNum);
                        this.formData.productOrderList = this.formData.productOrderList.filter(v => v.productOrderNumber !== productOrder);
                        const orderList = this.formData.productOrderList;
                        this.formData.productOrder = orderList.length > 0 ? orderList[0].productOrderNumber : "";
                        this.formData.finishedNum = this.remainingQuantity;
                        unQualifiedNum > restNum ? this.formData.unQualifiedNum = unQualifiedNum - restNum : this.formData.unQualifiedNum = 0;
                        this.workreportButtonText = "继续报工";
                        this.confirmButtonLoading = false;
                        if(!orderList.length){
                            setTimeout(() => {
                                Dialog({title:'提示',message:`当前已无此物料${materialCode}关联的订单,剩余数量可报工数量:${this.remainingQuantity},请添加订单后再报工`});
                            },800)
                        }
                    }).catch((error) => {
                        this.$message({type: 'info',message: '已取消报工'});
                        this.confirmButtonLoading = false;
                        console.log('报工失败',error);     
                    });
                    return;
                } else {
                    await this.saveWorkOrder();
                    this.cancel_btn();
                    this.workreportButtonText = "报工";
                    this.confirmButtonLoading = false;
                }
            }
            if(this.isPlanShutdown){
                try {
                    await this.saveWorkOrder();
                    this.cancel_btn();
                    this.confirmButtonLoading = false;
                } catch (error) {
                    this.confirmButtonLoading = false;
                }
            }
        },
        saveWorkOrder(remainingPlanNum = null){
            return new Promise((resolve,reject) => {
                let processMaterialList = this.records.processMaterialTable.map(item => {
                    return {materialCode:item.materialCode,materialName:item.materialName,quantity:item.defectQuantity,usedQuantity:item.usedQuantity,statisticalQuantity:item.statisticalQuantity,remarks:""};
                })
                const { reportWay, lineName, materialName, materialCode, productOrder,downtReasonList, finishedNum, unQualifiedNum, planNumber, attendanceHours, classes, equipmentRunningHours,singleShiftWage,standardManpower,pieceRate } = this.formData;
                const { scrapField1,scrapField2,scrapField1Reason,scrapField2Reason,scrapQuantity,supplierCode,supplierName } = this.formData;
                const calNum = {
                    completedQuantity: remainingPlanNum === null ? finishedNum : remainingPlanNum,
                    qualifiedQuantity: remainingPlanNum === null ? (Number(finishedNum) - Number(unQualifiedNum)) : ((remainingPlanNum - unQualifiedNum < 0) ? 0 : (remainingPlanNum - unQualifiedNum)),
                    unqualifiedQuantity: remainingPlanNum === null ? unQualifiedNum : ((remainingPlanNum - unQualifiedNum < 0) ? remainingPlanNum : unQualifiedNum)
                };
                const paramsObj = {
                    productName:materialName,
                    productCode:materialCode,
                    workReportCode:reportWay,  //0-装配报工 1-EPC报工
                    workReportType:lineName,  //线体名称:装配1/2/3..线
                    productNumber:productOrder,
                    plannedQuantity:planNumber,
                    completedQuantity:calNum.completedQuantity,
                    qualifiedQuantity:calNum.qualifiedQuantity,
                    unqualifiedQuantity:calNum.unqualifiedQuantity,
                    attendanceHours:attendanceHours,
                    reportDate:this.records.date,
                    operatorId:this.userId,
                    operator:this.nickname,
                    operatorPhone:this.userPhone,
                    username:this.username,
                    reviewStatus:0,  //审核状态 0-未审核 1-驳回 2-审核通过
                    classes:classes,
                    machine:"",
                    machineCode:"",
                    workShop:"装配线",  //车间类型 0-装配线 1-机加工
                    workShopCode:0,
                    classesTime:"",
                    appealStatus:0,
                    appealRemark:"",
                    inspectionPerson:"",
                    inspectionPersonCode:"",
                    productionProcessList:this.records.recordTable,
                    processMaterialList:processMaterialList,
                    warehouseCode:"",
                    warehouseId:"",
                    teamName:this.teamInfo.teamName,
                    downtimeReportlList:downtReasonList,
                    pieceRate:pieceRate,
                    singleShiftWage:singleShiftWage,
                    standardManpower:standardManpower,
                    operatingTime:equipmentRunningHours,
                    allowRepeated:remainingPlanNum === null ? (this.workreportButtonText == "继续报工" ? 1 : 0) : 1,
                    laborCostQuantity:scrapField1,
                    workScrapReason:"",
                    materialScrapQuantity:scrapField2,
                    materialScrapReason:"",
                    toolCostQuantity:scrapQuantity,
                    supplierCode,
                    supplierName
                }
                reqSaveData(paramsObj).then(response => {
                    const img1 = require("../../assets/image/smilingface.png");
                    const img2 = require("../../assets/image/cryingface.png");
                    if(response.data.code === 200){
                        if(paramsObj.completedQuantity >= paramsObj.plannedQuantity){
                            this.$alert(`<div style='display:flex;align-items:center;'><img src=${img1} style='width:50px;height:50px;margin-right:10px;'><span>报工完成</span></div>`, '提示', {
                                dangerouslyUseHTMLString: true
                            });
                        } else {
                            this.$alert(`<div style='display:flex;align-items:center;'><img src=${img2} style='width:50px;height:50px;margin-right:10px;'><span>产出未达成,请再接再厉!</span></div>`, '提示', {
                                dangerouslyUseHTMLString: true
                            });
                        }
                        resolve();
                    }
                    console.log("保存数据api",response);
                }).catch(error => {
                    this.confirmButtonLoading = false;
                    this.$alert("报工失败:"+ error.response.data.message,'提示',{confirmButtonText:"确定",callback:action => {}});
                    console.log("保存数据api",error);
                    reject();
                });
            })
        },
        cancel_btn(){
            this.formData.reportWay = "";
            this.formData.lineName = "";
            this.formData.materialCode = "";
            this.formData.productOrder = "";
            this.formData.finishedNum = "";
            this.formData.unQualifiedNum = "";
            this.formData.planNumber = "";
            
            // this.$refs.leftForm.resetFields();
            // this.$refs.rightForm.resetFields();
            this.formData.productOrderList = [];         
            this.formData.planNumber = "";
            this.formData.qualifiedNum = "";
            this.formData.attendanceHours = 11;
            this.formData.downtReason = "";
            this.formData.downtHours = "";
            this.records.recordTable = [];
            this.records.processMaterialTable = [];
            //停机时长置0
            this.formData.downtReasonList.forEach(k => {
                k.downtimeDuration = "";
            })
            this.formData.scrapField1 = ''
            this.formData.scrapField1Reason = "",
            this.formData.scrapField2 = '';
            this.formData.scrapField2Reason = "";
            this.formData.scrapQuantity = '';
            this.formData.supplierCode = '';
            this.formData.supplierName = '';
        },
        //格式化时间
        formatDate(val,type){
            let date = new Date(val);
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let h = date.getHours();
            let m = date.getMinutes();
            let s = date.getSeconds();
            if(type === 0){
                return year + "-" + this.addZero(month) + "-" + this.addZero(day) + " " + this.addZero(h) + ":" + this.addZero(m) + ":" + this.addZero(s);
            } else if (type === 1){
                return year + "-" + this.addZero(month) + "-" + this.addZero(day);
            } else if (type === 2){
                return this.addZero(h) + ":" + this.addZero(m) + ":" + this.addZero(s);
            } else if (type === 3){
                return year + "-" + this.addZero(month) + "-" + this.addZero(day) + " 00:00:00";
            }
        },
        addZero(val){
            return val > 9 ? val : "0" + val;
        },
        //根据物料编码获取其所有工序的所有用料信息
        getAllProcessMaterialListInfo(){
            let materialCode = this.formData.materialCode;
            reqProcessMaterialList(materialCode).then(res => {
                if(res.data.code === 200 && res.data.data.length > 0){
                    let list = res.data.data;
                    const seen = new Set();
                    this.records.processMaterialTable = list.filter((ele,index,self) => {
                        if(!seen.has(ele.materialName)){
                            seen.add(ele.materialName);
                            ele.usedQuantity = 0;
                            ele.defectQuantity = 0;
                            ele.statisticalQuantity = 0;
                            return true;
                        }
                        return false;
                    })
                }
                console.log('通过物料编码查询工序用料信息',res);
            }).catch(err => {
                this.$message({type:"error",message:"查询工序用料信息出错"+err});
            })
        },
        //对工序进行排序(工具函数)
        sortProcedures(originProceduresList) {
            let sortedProcedures = [];
            const procedureMap = new Map();
            //找出所有的初始工序
            let initProcessList = originProceduresList.filter(item => (item.supProcedureId === "" || item.supProcedureId === null));
            let proceduresList = originProceduresList.filter(item => (item.supProcedureId !== "" && item.supProcedureId !== null));
            // 将工序信息存入Map中，方便后续查找
            proceduresList.forEach(procedure => {
                procedureMap.set(procedure.id, procedure);
            });
            let list = [];
            for(let i = 0; i < initProcessList.length; i ++){
                let temp = [];
                // 找到没有上一道工序的工序作为起始点
                let startProcedure = initProcessList[i];
                while (startProcedure) {
                    temp.push(startProcedure);
                    const nextProcedure = procedureMap.get(startProcedure.nextProcedureId);
                    if (nextProcedure) {
                        startProcedure = nextProcedure;
                    } else {
                        break;
                    }
                }
                initProcessList[i].procedureList = temp;
                list.push(initProcessList[i]);
            }
            let id = "";
            for(let j = 0; j < list.length; j ++){
                if(list[j].procedureList.length > sortedProcedures.length){
                    id = list[j].id;
                    sortedProcedures = list[j].procedureList;
                }
            }
            //插入另一分支的头节点
            if(list.length > 1){
                let temp = [];
                let headProcess = list.filter(item => item.id != id)[0];
                for(let k = 0; k < sortedProcedures.length; k ++){
                    if(sortedProcedures[k].id == headProcess.nextProcedureId){
                        temp.push(headProcess);
                    }
                    temp.push(sortedProcedures[k]);
                }
                sortedProcedures = temp;
            }
            console.log("去除目视后的工序进行排序:",sortedProcedures);
            return sortedProcedures;
        },
        //获取班组列表信息
        getClassTeamList() {
            reqClassTeamList().then(res => {
                if(res.data.code === 200){
                    this.classTeamList = res.data.data.map(item => item.teamName);
                }
            }).catch(error => {
                this.$message({type:"error",message:"获取班组列表信息出错"});
            })
        },
        //根据产线名称查询工序
        getProcessByLine(){
            let lineName = this.formData.lineName;
            if(lineName.trim() === '') return ;
            reqProcessByLine(lineName).then(res => {
                if(res.data.code === 200){
                    this.records.recordTable = res.data.data.content.map(item => {
                        return {processName:item.name,defectQuantity:"",procedureId:item.procedureId,materialCodeList:[]};
                    })
                    //获取产线对应工序的工序用料信息
                    this.getProcessMaterialListByProcedureId();
                }
                console.log('根据产线查询工序',res);
            }).catch(err => {
                this.$message({type:"error",message:"产线查询工序出错:"+err});
            })
        },
        wirteDowntReason(){
            this.$refs.downtReason.dialogFormVisible = true;
        },
        downtReasonClose(parameter){
            this.formData.downtReasonList = parameter;
        },
        //获取班次信息
        async getClassList() {
            reqClassesList().then(res => {
                if(res.data.code === 200){
                    this.formData.classesList = res.data.data;
                }
                console.log('获取班次信息',res);
            }).catch(err => {
                console.log('获取班次信息失败',err);
                console.log('获取班次信息失败，即将赋值默认班次数据...');
                this.formData.classesList = [{id:1,shiftType:'白班'},{id:2,shiftType:'晚班'}];
            })
        },
        validateInput(bindDataName) {
            const inputValue = this.formData[bindDataName];        
            //输入正实数，小数只能有一位
            const regex = /^(?!00)\d+(\.\d{0,1})?$/;
            if (!regex.test(inputValue) && inputValue !== '') {
                this.formData[bindDataName] = inputValue.slice(0, -1);
            }
        },
        //获取单班工资默认值
        async getDefaultSalary(){
            let defaultSalary = 0;
            reqDefaultSalary().then(response => {
                if(response.data.code === 200){
                    const tmp = response.data.data;
                    for(let i = 0; i < tmp.length; i ++){
                        if(tmp[i].configKey == "装配线"){
                            defaultSalary = tmp[i].configValue;
                            break;
                        }
                    }
                }
                this.formData.singleShiftWage = defaultSalary;
                console.log('获取单班工资api',response);
            }).catch(error => {
                console.log('获取单班工资api异常',error);
                console.log("获取单班工资异常,即将设定单班工资初始值0...");
                this.formData.singleShiftWage = 0;
            })
        },
        async getOeeInfoByProductModel(){
            return new Promise((resolve,reject) => {
                let productModel = this.formData.materialCode;  //车床 + A  铣床 D  倒角F
                if(productModel === ""){
                    return;
                }
                const obj = {pieceRate:"", standardManpower:"", operatingTime:""};
                this.formData.equipmentRunningHours = 0;
                this.formData.standardManpower = 0;
                this.formData.pieceRate = 0;
                reqOeeInfoByProductModel(productModel).then(response => {
                    if(response.data.code === 200 && response.data.data){
                        const { pieceRate, standardManpower, operatingTime } = response.data.data;
                        this.formData.equipmentRunningHours = operatingTime || 0;
                        this.formData.standardManpower = standardManpower || 0;
                        this.formData.pieceRate = pieceRate || 0;
                    } else {
                        this.formData.equipmentRunningHours = 0;
                        this.formData.standardManpower = 0;
                        this.formData.pieceRate = 0;
                    }
                    console.log('通过产品型号获取节拍对象信息api',response);
                    resolve();
                }).catch(error => {
                    console.log('通过产品型号获取节拍对象信息api',error);
                    this.$alert("请求产品节拍信息出错:" + error,'提示',{confirmButtonText:"确定",callback:action => {}});
                    reject(error);
                })
            })
        },
        planShutdownEvent(){
            const isPlanShutdown = this.isPlanShutdown;
            const tmp = this.formData;
            this.$refs.leftForm.resetFields();
            this.$refs.rightForm.resetFields();
            if(isPlanShutdown){
                tmp.materialName = "";
                tmp.downtReasonList = [];
                tmp.finishedNum = 0;
                tmp.attendanceHours = 0;
                this.formData.pieceRate = "";
                this.formData.singleShiftWage = "";
                this.formData.standardManpower = "";
            } else {
                tmp.finishedNum = "";
            }
        },
        //校验设备运行时长输入框
        validateInputEquipmentRunningHours() {
            const inputValue = this.formData.equipmentRunningHours;
            //const regex = /^\d+(\.\d{0,1})?$/;
            const regex = /^(?!00)\d+(\.\d{0,1})?$/;
            if (!regex.test(inputValue) && inputValue !== '') {
                this.formData.equipmentRunningHours = inputValue.slice(0, -1);
            }
        },
        //获取订单计划的剩余数量
        getOrderResidueCount(){
            return new Promise((resolve,reject) => {
                const { reportWay, productOrder, planNumber } = this.formData;
                reqOrderResidueCount({productNumber:productOrder,workReportCode:reportWay,plannedQuantity:planNumber}).then(response => {
                    if(response.data && response.data.code === 200 && response.data.data){
                        const restNum = response.data.data;
                        resolve(restNum);
                        return;
                    }
                    resolve(0);
                },error => {
                    console.log('请求订单剩余计划数量api',error);
                    this.$alert("请求订单剩余计划数量出错:" + error.response.data.message,'提示',{confirmButtonText:"确定",callback:action => {}});
                    reject(new Error(error));
                })
            })
        },
        //获取当前用户的班次信息
        getUserClassInfo(){
            const { name,preferred_username,email} = getUserInfoByToken();
            reqUserClassInfo(preferred_username).then(response => {
                if(response.data.code === 200 && response.data.data){
                    const { teamId,teamName,shiftId,shiftName } = response.data.data;
                    this.formData.classes = response.data.data.shiftName;
                    this.teamInfo.teamName = teamName;
                } else {
                    this.$confirm("当前用户所在班组未查询到排班信息，请联系管理人员在排班小程序上进行排班后再报工", '提示', { type: 'warning'});
                }
                console.log('获取用户班次信息api',response);
            },error => {
                this.$confirm("获取当前用户班次信息出错(将会影响报工),点击确定重新请求", '提示', { type: 'warning'}).then(confirm => {
                    this.getUserClassInfo();
                })
                console.log('获取用户班次信息api',error.response);
            })
        },
        //判断用户类别 2-管理员 1-班组长 0-组员 -1非成员
        checkTeamInfo() {
            reqCheckIsTeam().then(res => {
                if(res.data.code === 200){
                    const teamRoleNum = res.data.data;
                    this.teamInfo.teamRoleNum = teamRoleNum;
                }
                console.log('判断当前用户类别',res);
            }).catch(err => {
                this.teamInfo.teamRoleNum = null;
                Dialog.confirm({title:'提示',message:'用户类别请求失败(将会影响报工)，点击确定按钮重试'}).then(confirm => {
                    this.checkTeamInfo();
                })
            })
        },
        async setPageAutoHeight(){
            const dom = document.querySelector(".page-head");
            //设置head的height:通知栏h + 胶囊h + 提示文字高度18
            const isDevelopment = process.env.NODE_ENV === 'development';
            let height = 44;
            try {
                if(!isDevelopment){
                    const ch = await closeBarheight();
                    const bh = await appBarheight();
                    const th = 18;
                    height = ch + bh + th;
                    console.log("获取关闭按钮高度:",ch," 通知栏高度:" + bh);
                }
            } catch (error) {
                console.log("获取通知栏、关闭按钮高度失败:error",error);
                height = 44;
            }
            dom.style.height = height + 'px';
        },
        dealQuantityEvent(field){
            this.formData[field] = String(this.formData[field]).replace(/[^\d]/g, '');
            const { finishedNum,scrapField1,scrapField2,scrapQuantity } = this.formData;
            this.formData.unQualifiedNum = Number(scrapField1) + Number(scrapField2) + Number(scrapQuantity);
            this.formData.qualifiedNum = (Number(finishedNum) - this.formData.unQualifiedNum) >= 0 ? Number(finishedNum) - this.formData.unQualifiedNum : 0;
        },
        supplierChangeEvent(supplierCode){
            const supp = this.supplierList.find(item => item.code === supplierCode);
            if(supp) this.formData.supplierName = supp.name;
        },
        supplierRemoteMethod(type = 'init',query){
            if(type == 'init' || query == ''){
                this.supplierRemoteLoading = true;
                reqSupplierList().then(response => {
                    const list = response.data.data.content;
                    this.supplierList = list.map(item => ({ code: item.code, name: item.name }));
                    this.supplierRemoteLoading = false;
                },error => {
                    this.supplierRemoteLoading = false;
                    this.supplierList = [];
                })
            }
            if (query !== '' && type == 'search') {
                this.supplierRemoteLoading = true;
                reqSupplierList({ code:query,name:query }).then(response => {
                    const list = response.data.data.content;
                    this.supplierList = list.map(item => ({ code: item.code, name: item.name }));
                    this.supplierRemoteLoading = false;
                },error => {
                    this.supplierRemoteLoading = false;
                    this.supplierList = [];
                })
            } else {
                this.supplierList = [];
            }
        }
    }
}
</script>
  
<style lang="scss" scoped>
  .workorder{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    user-select: none;
    .page-head{
        width: 100%;
        height: 40px;
        padding: 0 5%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #4095e5;
        color: white;
        font-size: 13px;
        min-height: 40px;
    }
    @media screen and (min-width:300px) and (max-width:600px) {
        .page-head{
            width: 100%;
            height: 80px;
            align-items: flex-end;
            padding: 1% 5%;
            min-height: 100px;
        }
    }
    .page-info{
        width:100%;
        height: 30px;
        padding: 0 3%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }
    .page-main{
        width: 100%;
        flex:3;
        display: flex;
        flex-wrap: wrap;
        padding: 0 3%;
        justify-content: space-between;
        box-sizing: border-box;
        .main-left{
            box-sizing: border-box;
        }
        .main-right{
            box-sizing: border-box;
        }
        @media screen and (min-width: 600px){
            .main-left{
                width: 40%;
                height: 40%;
            }
            .main-right{
                width: 40%;
                height: 100%;
            }
        }
    }
    .page-records{
        width: 100%;
        flex:5;
        padding: 0 3%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .records-head{
            display: flex;
            flex-direction: column;
            .head-title{
                font-size: 14px;
                font-weight: 500;
            }
            .head-main{
                display: flex;
                justify-content: space-between;
                margin: 1% 0;
                .main-item{
                    display: flex;
                    align-items: center;
                    .item-tip{
                        font-size: 14px;
                        margin-right: 15px;
                    }
                    @media screen and (min-width:300px) and (max-width:600px) {
                        .el-date-picker{
                            width: 40vw;
                        }
                    }
                }
            }
        }
        .records-process{
            display: flex;
            flex-direction: column;
            margin: 2px 0;
            .process-content{
                display: flex;
                flex-direction: column;
                margin: 5px 0;
                .process-table{
                    width: 100%;
                    overflow: auto;
                    margin: 4px 0;
                }
                .bom-table{
                    width: 100%;
                    overflow: auto;
                }
            }
        }
    }
    .page-footer{
        width: 100%;
        flex:0.5;
        padding: 5px 0;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .footer-btn{
            width: 100px;
        }
    }
  }
  .time-picker {
    width: 80%; /* 在小屏幕上设置为100%宽度 */
  }
</style>
<style lang="scss">
@media screen and (min-width:300px) and (max-width:600px) {
    .el-message-box{
        width:320px;
    }
}
</style>
  